<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            --color: #EFEA52;
            box-sizing: border-box;
        }

        body {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-around;
            align-items: center;
            min-height: 100vh;
            width: 100vw;
        }

        .image {
            right: 0;
            top: 0;
        }

        .box {
            position: relative;
            width: 500px;
            height: 600px;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .head {
            position: relative;
            box-sizing: border-box;
            display: flex;
            /* flex-direction: column; */
            width: 260px;
            border-top: 267px solid var(--color);
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            /* border-radius: 20px; */
            /* background-color:blue; */
            margin: 0 auto;
            z-index: 1;
        }

        .face {
            width: 300px;
            height: 202px;
            margin-top: -219px;
            background-color: var(--color);
            display: flex;
            flex-direction: column;
            align-items: center;

        }

        .eyes {
            display: flex;
        }

        .eye {
            width: 81px;
            height: 93px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 3px solid black;
            background-color: white;
        }

        .eyebrow {
            display: flex;
            width: 50px;
            justify-content: space-between;
            margin-top: -40px;
            margin-bottom: 20px;
        }

        .eyebrow span {
            width: 5px;
            height: 16px;
            background-color: black;
        }

        .eyebrow span:nth-child(1) {
            transform: rotate(-15deg);
            margin-top: 10px;
        }

        .eyebrow span:last-child {
            transform: rotate(15deg);
            margin-top: 10px;
        }

        .nose {
            height: 43px;
            width: 30px;
            border: 2px solid black;
            border-radius: 100% 100% 100% 100%/80% 80% 104% 100%;
            border-left-width: 0.1px;
            border-top-width: 4px;
            border-right-width: 2px;
            border-bottom-width: 0px;
            background-color: var(--color);
            margin-top: -36px;
            z-index: 7;
        }



        .ieye {
            top: inherit;
            width: 39px;
            height: 40px;
            border-radius: 50%;
            background-color: black;
            box-shadow: inset -1px 1px 0px 9px #13A6D8;
        }

        .nose::after {
            content: " ";
            width: 32px;
            height: 29px;
            background-color: var(--color);
            border-radius: 50%;
            margin-left: -6px;
            margin-top: 19px;
            display: flex;

        }

        .mouthline {
            position: relative;
            width: 166px;
            height: 130px;
            border-radius: 0% 0% 50% 50%;
            border: 3px solid;
            border-top: none;
            border-left: none;
            border-right: none;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            margin-top: -177px;
            z-index: 2;
        }

        .mouthline::after {
            content: '';
            width: 80px;
            height: 20px;
            background-color: var(--color);
            border-radius: 50%;
            border-bottom-color: transparent;
        }

        .blushs {
            width: 177px;
            height: 80px;
            display: flex;
            justify-content: space-between;
        }

        .blush {
            position: relative;
            height: 29px;
            width: 45px;
            border-radius: 100% 84% 100% 100%/100% 100% 100% 100%;
            border: 2px solid hsla(10, 100%, 40%, 1);
            border-bottom-width: 0px;
            margin-top: -45px;
            margin-left: -15px;
            display: flex;
            justify-content: space-evenly;
            background-color: var(--color);
        }

        .blush::after {
            position: absolute;
            content: '';
            width: 25px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--color);
            /* background-color:red; */
            bottom: -5px;
            right: 12px;
        }

        .blush:nth-child(2) {
            margin-right: -20px;
        }

        .blush span {
            height: 3px;
            box-sizing: border-box;
            width: 3px;
            margin-top: 8px;
            border-radius: 50%;
            background-color: hsla(10, 100%, 40%, 1);
            filter: blur(1px);
            z-index: 13;
        }

        .blush span:nth-child(2) {
            margin-top: 13px;
        }

        .blush .shortline {
            position: absolute;
            width: 17px;
            height: 6px;
            left: 12px;
            top: 0px;
            border-radius: 50%;
            margin-top: 15px;
            border: 2px solid rgba(0, 0, 0, 0.8);
            border-bottom-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
            z-index: 12;
        }

        .blush:nth-child(2) .shortline {
            left: 10px;
        }

        .tooth {
            position: relative;
            margin-top: -10px;
            width: 200px;
            height: 50px;
            display: flex;
            justify-content: center;
            z-index: 0;
        }

        .tooth span {
            height: 32px;
            width: 30px;
            background-color: white;
            margin-right: 5px;
            border: 2px solid;
        }

        .points {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: row;
        }

        .points span {
            position: absolute;
            top: 0;
            left: 0;
            width: 22px;
            height: 15px;
            margin-left: 10px;
            background-color: #AFB615;
            border-radius: 50%;
            transform: rotate(-45deg);
        }

        .points span:nth-child(1) {
            top: -245px;
            left: 4px;
        }

        .points span:nth-child(2) {
            top: -212px;
            left: 2px;
            width: 12px;
            height: 8px;
        }

        .points span:nth-child(3) {
            top: -57px;
            left: 14px;
            width: 15px;
            height: 11px;
        }

        .points span:nth-child(4) {
            top: -40px;
            left: 22px;
            width: 20px;
            height: 14px;
        }

        .points span:nth-child(5) {
            top: -245px;
            left: 204px;
            width: 22px;
            height: 16px;
        }

        .points span:nth-child(6) {
            top: -57px;
            left: 180px;
            width: 23px;
            height: 16px;
        }

        .points span:nth-child(7) {
            top: -30px;
            left: 178px;
            width: 11px;
            height: 8px;
        }

        .mouth {
            box-sizing: content-box;
            display: flex;
            width: 100%;
            height: 30px;
            justify-content: center;
            /* align-items:center; */
            /* border: 1px solid ;0 */
            /* background-color:red; */
        }

        .mouth span {
            width: 2px;
            height: 2px;
            margin-left: -84px;
            margin-top: 4px;
            transform: rotate(-90deg);
            border-radius: 50%;
            box-shadow: 0 0 0 0 #A36000, 0px 0px 0 0 #A36000, -0.4987px 1px 0 0 #A36000, -0.98962px 2px 0 0 #A36000, -1.46509px 3px 0 0 #A36000, -1.9177px 4px 0 0 #A36000, -2.34039px 5px 0 0 #A36000, -2.72656px 6px 0 0 #A36000, -3.07017px 7px 0 0 #A36000, -3.36588px 8px 0 0 #A36000, -3.60907px 9px 0 0 #A36000, -3.79594px 10px 0 0 #A36000, -3.92357px 11px 0 0 #A36000, -3.98998px 12px 0 0 #A36000, -3.99413px 13px 0 0 #A36000, -3.93594px 14px 0 0 #A36000, -3.81634px 15px 0 0 #A36000, -3.63719px 16px 0 0 #A36000, -3.40128px 17px 0 0 #A36000, -3.11229px 18px 0 0 #A36000, -2.77474px 19px 0 0 #A36000, -2.39389px 20px 0 0 #A36000, -1.97568px 21px 0 0 #A36000, -1.52664px 22px 0 0 #A36000, -1.05378px 23px 0 0 #A36000, -0.56448px 24px 0 0 #A36000, -0.06637px 25px 0 0 #A36000, 0.43278px 26px 0 0 #A36000, 0.92518px 27px 0 0 #A36000, 1.40313px 28px 0 0 #A36000, 1.8592px 29px 0 0 #A36000, 2.28625px 30px 0 0 #A36000, 2.67762px 31px 0 0 #A36000, 3.02721px 32px 0 0 #A36000, 3.32956px 33px 0 0 #A36000, 3.57996px 34px 0 0 #A36000, 3.77449px 35px 0 0 #A36000, 3.91012px 36px 0 0 #A36000, 3.98474px 37px 0 0 #A36000, 3.99717px 38px 0 0 #A36000, 3.94723px 39px 0 0 #A36000, 3.8357px 40px 0 0 #A36000, 3.66431px 41px 0 0 #A36000, 3.43574px 42px 0 0 #A36000, 3.15355px 43px 0 0 #A36000, 2.82216px 44px 0 0 #A36000, 2.44673px 45px 0 0 #A36000, 2.03312px 46px 0 0 #A36000, 1.58778px 47px 0 0 #A36000, 1.11766px 48px 0 0 #A36000, 0.63011px 49px 0 0 #A36000, 0.13272px 50px 0 0 #A36000, -0.36674px 51px 0 0 #A36000, -0.86048px 52px 0 0 #A36000, -1.34079px 53px 0 0 #A36000, -1.80018px 54px 0 0 #A36000, -2.23147px 55px 0 0 #A36000, -2.62795px 56px 0 0 #A36000, -2.98341px 57px 0 0 #A36000, -3.29232px 58px 0 0 #A36000, -3.54986px 59px 0 0 #A36000, -3.752px 60px 0 0 #A36000, -3.89559px 61px 0 0 #A36000, -3.9784px 62px 0 0 #A36000, -3.99912px 63px 0 0 #A36000, -3.95743px 64px 0 0 #A36000, -3.85399px 65px 0 0 #A36000, -3.69042px 66px 0 0 #A36000, -3.46925px 67px 0 0 #A36000, -3.19395px 68px 0 0 #A36000, -2.8688px 69px 0 0 #A36000, -2.49889px 70px 0 0 #A36000, -2.08998px 71px 0 0 #A36000, -1.64846px 72px 0 0 #A36000, -1.18121px 73px 0 0 #A36000, -0.69553px 74px 0 0 #A36000, -0.19898px 75px 0 0 #A36000, 0.30068px 76px 0 0 #A36000, 0.79567px 77px 0 0 #A36000, 1.27826px 78px 0 0 #A36000, 1.74094px 79px 0 0 #A36000, 2.17651px 80px 0 0 #A36000;
        }

        .clothse {
            margin-top: -2px;
            width: 240px;
            height: 60px;
            background-color: #D09104;
            border: 3px solid;
        }
        .clothse .top{
            width:100%;
            height: 20px;
            background-color:white;
            border-bottom: 2px solid;
            display: flex;
            justify-content:center;
        }
        .tie{
              width:20px;
              height: 40px;
              background-color:red;
        }
         .clothse .top>div:nth-child(1),.clothse .top>div:nth-child(3)
        {
            width:25px;
            height: 20px;
            border: 2px solid;
            transform:rotate(39deg);
            margin-top: -12px;
            border-top: none;
            border-left:none;

            border-radius:4px;
            /* margin-top:-12px; */

         }  
        .clothse .bottom{
            width:100%;
            display: flex;
            justify-content:space-evenly;
        }
        .bottom div{
            margin-top: 7px;
            height: 10px;
            width:78px;
            background-color:black;
        }
        .bottom div:first-child , .bottom div:last-child{
            width:45px;
        }
    </style>

</head>

<body>
    <div class="image"><img src="./image/haimianbaobao.jpeg" alt="" srcset=""></div>
    <div class="box">
        <div class="head">
            <div class="face">
                <div class="eyes">

                    <div class="eye">
                        <div class="eyebrow">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="ieye"></div>
                    </div>
                    <div class="eye">
                        <div class="eyebrow">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="ieye"></div>
                    </div>
                </div>
                <div class="nose"></div>
                <div class="blushs">
                    <div class="blush">
                        <span></span>
                        <span></span>
                        <span></span>
                        <div class="shortline"></div>
                    </div>
                    <div class="blush">
                        <span></span>
                        <span></span>
                        <span></span>
                        <div class="shortline"></div>
                    </div>
                </div>
                <div class="mouthline"></div>
                <div class="tooth">
                    <span></span>
                    <span></span>
                </div>
                <div class="mouth">
                    <span></span>
                </div>
            </div>
            <div class="points">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>



        </div>
        <div class="clothse">
            <div class="top">
                <div></div>
                <div class="tie">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div></div>
            </div>
            <div class="bottom">
                <div></div>
                <div >
                </div>
                <div></div>
            </div>
        </div>
        <div class="legs">
            <div class="leg">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="leg">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>


</body>

</html>